<template>
  <el-dialog
    ref="tagMgrLayer"
    title="标签选择"
    width="400px"
    :visible.sync="params.visible"
  >
    <compTable
      ref="table"
      :show-search="false"
      :table-height="350"
      :table-header="tableHeader"
      :table-data="tableData"
      @click-events="handleClickRow"
    />
    <div slot="footer">
      <el-button type="primary" @click="confirm">{{ confirmText }}</el-button>
      <el-button @click="params.visible = false">取消</el-button>
    </div>
    <tagmgrpro-layer
      v-if="tagmgrproLayerParams.visible"
      :params="tagmgrproLayerParams"
    />
  </el-dialog>
</template>

<script>
/**
 * 入参： tagID, type, isSelect
 * 出参：tagName, tagID
 */
import { getTagList, addTag, delTag, setTag } from '@/api/flow'
import Global from '@/../public/js/global'
import { ParamArr, SQLTable } from '@/../public/js/paramarr'
import TagmgrproLayer from '@/views/script/dialog/TagmgrproLayer.vue'
import { moveTag } from '@/api/coreMgr'
export default {
  name: 'TagmgrLayer',
  components: { TagmgrproLayer },
  props: {
    params: {
      type: Object,
      default() {
        return {
          visible: false,
          tagID: '', // 标签id
          type: '' // 类型
        }
      }
    }
  },
  data() {
    return {
      tableHeader: [
        {
          prop: 'title',
          label: '名称',
          render: (h, { row }) => {
            if (row['_title']) {
              return h(
                'el-tag',
                { attrs: { color: Global.getColor(row['color'], true) }},
                row['title']
              )
            } else {
              return h('span', row['title'])
            }
          }
        }
      ],
      tableData: [],
      paramsObj: {},
      row: {},
      tagmgrproLayerParams: {
        visible: false
      },
      confirmText: '确定'
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (!this.params.isSelectTag) {
        this.confirmText = '添加'
        this.tableHeader.push({
          prop: 'option',
          label: '操作',
          align: 'center',
          isShow: true,
          width: 250,
          render: (h, { row, index }) => {
            return [
              h(
                'el-button',
                {
                  on: {
                    click: () => {
                      this.onTagSet(row, index)
                    }
                  }
                },
                '修改'
              ),
              ' ',
              h(
                'el-button',
                {
                  on: {
                    click: () => {
                      this.onTagDel(row)
                    }
                  }
                },
                '删除'
              ),
              ' ',
              h(
                'el-button',
                {
                  on: {
                    click: () => {
                      this.onTagUp(row, index)
                    }
                  },
                  attrs: { disabled: index === 0 }
                },
                '上移'
              ),
              ' ',
              h(
                'el-button',
                {
                  on: {
                    click: () => {
                      this.onTagDown(row, index)
                    }
                  },
                  attrs: { disabled: index === this.tableData.length - 1 }
                },
                '下移'
              )
            ]
          }
        })
      }
      const vPar = new ParamArr()
      if (this.params.type === 'script') vPar.setStr('sType', '脚本')
      if (this.params.type === 'flow') vPar.setStr('sType', '流程')
      if (this.params.tagID !== undefined) {
        vPar.setStr('tagID', this.params.tagID)
      }
      getTagList(vPar).then((vPar) => {
        const rows = []
        const table = new SQLTable(vPar.getTable('k_tag'))
        table.first()
        while (!table.eof()) {
          const row = {}
          row['id'] = table.getValueByName('ID')
          row['_title'] = this.params.type === 'flow'
          row['title'] = table.getValueByName('Name')
          row['color'] = table.getValueByName('TagColor')
          row['name'] = table.getValueByName('Name')
          rows.push(row)
          table.next()
        }
        this.tableData = rows
        if (this.params.tagID !== '') {
          const row = rows.find((item) => item.id === this.params.tagID)
          this.row = row
          // this.$refs.table.setCurrentRow(row)
        }
      })
    },
    handleClickRow(row) {
      this.row = row
    },
    onTagSet(row, index) {
      this.tagmgrproLayerParams = {
        visible: true,
        name: row.title,
        color: Global.getColor(row['color'], true),
        type: this.params.type
      }
      this.tagmgrproLayerParams.confirm = (params) => {
        this.tagmgrproLayerParams.visible = false
        const vPar = new ParamArr()
        vPar.setStr('Name', params.name)
        vPar.setStr('ID', row.id)
        vPar.setInt('TagColor', Global.getColorInt(params.color))
        vPar.setStr('sType', this.params.type)
        vPar.setStr('color', params.color)
        setTag(vPar).then((vPar) => {
          this.tableData.filter((item) => {
            if (item.id === vPar.getStr('ID')) {
              item['_title'] = true
              item['title'] = vPar.getStr('Name')
              item['color'] = vPar.getInt('TagColor')
              item['name'] = vPar.getStr('Name')
            }
          })
        })
      }
    },
    onTagDel(row) {
      this.$alert(`是否要删除"${row.name}"`, '提示', {
        confirmButtonText: '确定',
        showCancelButton: true,
        cancelButtonText: '取消'
      }).then(() => {
        const vPar = new ParamArr()
        vPar.setStr('ID', row.id)
        vPar.setStr('Name', row.title)
        vPar.setStr('sType', this.params.type)
        delTag(vPar).then((vPar) => {
          this.tableData = this.tableData.filter((item) => item.id !== row.id)
        })
      })
    },
    onTagUp(row, index) {
      const row1 = this.tableData[index - 1]
      const row2 = this.tableData[index]
      const vPar = new ParamArr()
      vPar.setStr('sType', this.params.type)
      vPar.setStr('srcID', row2['id'])
      vPar.setStr('srcName', row2['name'])
      vPar.setStr('destID', row1['id'])
      vPar.setStr('destName', row1['name'])
      vPar.setInt('Attachmode', 1)
      moveTag(vPar).then((vPar) => {
        this.tableData[index] = row1
        this.tableData[index - 1] = row2
      })
    },
    onTagDown(row, index) {
      const row1 = this.tableData[index + 1]
      const row2 = this.tableData[index]
      const vPar = new ParamArr()
      vPar.setStr('sType', this.type)
      vPar.setStr('srcID', row2['id'])
      vPar.setStr('srcName', row2['name'])
      vPar.setStr('destID', row1['id'])
      vPar.setStr('destName', row1['name'])
      vPar.setInt('Attachmode', 1)
      moveTag(vPar).then((vPar) => {
        this.tableData[index] = row1
        this.tableData[index + 1] = row2
      })
    },
    confirm() {
      if (this.params.isSelectTag) {
        const params = {
          tagID: this.row.id,
          tagName: this.row.title
        }
        if (this.params.confirm !== undefined) {
          this.params.confirm(params)
        } else {
          this.$emit('confirm', params)
        }
      } else {
        this.tagmgrproLayerParams = {
          visible: true,
          name: '',
          color: '',
          type: this.params.type
        }
        this.tagmgrproLayerParams.confirm = (params) => {
          this.tagmgrproLayerParams.visible = false
          const vPar = new ParamArr()
          vPar.setStr('Name', params.name)
          if (this.params.type === 'flow') {
            vPar.setInt('TagColor', Global.getColorInt(params.color))
          }
          vPar.setStr('sType', this.params.type)
          addTag(vPar).then((vPar) => {
            const row = {}
            row['id'] = vPar.getStr('ID')
            if (this.params.type === 'flow') {
              row['_title'] = true
              row['title'] = vPar.getStr('Name')
            } else {
              row['_title'] = false
              row['title'] = vPar.getStr('Name')
            }
            row['color'] = vPar.getInt('TagColor')
            row['name'] = vPar.getStr('Name')
            this.tableData.push(row)
          })
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
